<template>
    <div>
      <!-- 面包屑 -->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/panel/rank' }">{{$t('目录.市场洞察')}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 筛选 -->
      <div class="filter-card">
        <div class="filter-card-title">{{$t('目录.市场洞察')}}</div>
        <el-divider></el-divider>
        <div class="sub-title" style="width: 53.75rem;">{{ $t('国家') }}</div>
        <div style="display: flex; margin-top: 1rem;">
          <el-button :class="index==filterAll1.country_index?'country-btn-click':'country-btn'" @click="selectCountry(index)" v-for="(item,index) in countriesList" :key="index">{{ item.name }}</el-button>
        </div>
        <div class="sub-title" style="width: 53.75rem;margin: 1rem 0;">{{ $t('分类') }}</div>
        <div style="display: flex;">
          <div class="selecter-label">{{ $t('分类英文') }}</div>
          <!-- 下拉框 -->
          <el-select v-model="filterAll1.first_cate_id" placeholder="Select" size="large" style="width: 9.38rem" @change="selectCate1()">
            <el-option v-for="item in cateList" :key="item.id" :label="item.val" :value="item.id"></el-option>
          </el-select>
          <div class="selecter-label">{{ $t('更多') }}</div>
          <!-- 下拉框 -->
          <el-select v-model="filterAll1.second_cate_id" placeholder="Select" size="large" style="width: 9.38rem">
            <el-option v-for="item in moreList" :key="item.id" :label="item.val" :value="item.id" @change="selectCate2()"></el-option>
          </el-select>
        </div>
        <!-- 日期选择 -->
        <div class="sub-title" style="width: 53.75rem;margin: 1rem 0;">{{ $t('时间') }}</div>
        <div style="display: flex;">
          <el-date-picker v-model="filterAll1.log_date" type="date" placeholder="Pick a day" size="large" :disabled-date="disabledDate" value-format="YYYY-MM-DD" @focus="handleFocus" @visible-change="handleVisibleChange"></el-date-picker>
          <div v-if="isVip">
            <el-button type="primary" style="margin:0rem 0 0 1rem;width: 5.63rem;height: 2.5rem;background-color: rgba(22, 93, 255, 1);" @click="searchProduct()">{{ $t('搜索') }}</el-button>
          </div>
          <div v-else>
            <el-button type="primary" style="margin:0rem 0 0 1rem;width: 5.63rem;height: 2.5rem;background-color: rgba(22, 93, 255, 1);" disabled>{{ $t('搜索') }}</el-button>
          </div>
        </div>
      </div>
      <!-- 排行展示 -->
      <div class="show-card" style="position:relative">
        <!-- 一行 -->
        <div style="display: flex;">
          <div style="width: 85rem;display:flex">
            <div class="sub-title" style="white-space: nowrap;">{{ $t('增长率TOP100') }}</div>
            <div style="font-size: 0.7rem;color: #717a87; margin: 0.5rem 0 0 0.5rem;">{{ $t('前一百') }}</div>
          </div>
          <!-- 新增分段器 -->
          <!-- <div>
            <div class="custom-style" style="width: 24.5rem;">
              <el-segmented v-model="value" :options="options" block style="background-color: #fff;height: 2.5rem" @change="segmentChange"></el-segmented>
            </div>
          </div> -->
          <!-- 切换按钮  -->
          <div v-if="!isList" style="display: flex;position: absolute;right: 1rem;">
              <div style="cursor: pointer;">
                <img style="width: 1.88rem;height: 1.88rem;" @click="changeType(1)" src="../assets/img/icon/girdicon.svg" />
              </div>
              <div style="cursor: pointer;">
                <img style="width: 1.88rem;height: 1.88rem;margin-left: 1rem;" @click="changeType(2)" src="../assets/img/icon/listicon-act.svg" />
              </div>
          </div>
          <div v-else style="display: flex;position: absolute;right: 1rem;">
              <div style="cursor: pointer;">
                <img style="width: 1.88rem;height: 1.88rem;" @click="changeType(3)" src="../assets/img/icon/girdicon-act.svg" />
              </div>
              <div style="cursor: pointer;">
                <img style="width: 1.88rem;height: 1.88rem;margin-left: 1rem;" @click="changeType(4)" src="../assets/img/icon/listicon.svg" />
              </div>
          </div>
        </div>
          <!-- 新增 增速排行 v-if="isHotSellingRank"-->
          <div>
            <!-- 无数据时  -->
            <div v-if="!isListData2" v-loading="loading" element-loading-text="Loading..." style="margin: 6rem 0;"></div>
            <!-- 有数据时 -->
            <div v-else>
              <!-- 列表视图-->
            <div v-if="!isList" v-show="isVip" style="margin-top: 1rem;">
              <el-table :data="sortedProductList" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"  height="850"
              :row-style="{height:'70px'}" :cell-style="{'text-align':'center'}" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
              :default-sort="{ prop: sort, order:order }">
                  <el-table-column prop="goods_name" :label="this.$t('表格.商品')" width="380" fixed>
                              <template #default="scope">
                                  <div style="display: flex;">
                                      <div style="cursor: pointer;">
                                          <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;" @click="showDetail(scope.row.goods_id)"/>
                                      </div>
                                      <div class="showOverTooltip" @click="showDetail(scope.row.goods_id)" style="cursor: pointer;">
                                          <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                                          <span style="font-size: 14px">{{ scope.row.goods_name }}</span>
                                      </div>
                                  </div>
                              </template>
                  </el-table-column>
                  <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                    <template #default="scope">
                      <div style="color: #ff5c00;font-size: 14px">
                        <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == ''">
                          <span>-</span>
                        </div>
                        <div v-else-if="scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                          <span>{{ scope.row.retail_price_symbol }}</span>
                        </div>
                        <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == ''">
                          <span>{{ scope.row.retail_price_symbol }}</span>
                        </div>
                        <div v-else>
                          <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
<!--                  <el-table-column prop="sale_price" :label="this.$t('进货价')" sortable="custom" width="140">-->
<!--                            <template #default="scope">-->
<!--                                <div style="color: #ff5c00;font-size: 14px">-->
<!--                                    <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == ''">-->
<!--                                        <span>-</span>-->
<!--                                    </div>-->
<!--                                    <div v-else>-->
<!--                                        <span>{{ scope.row.sale_price_symbol }}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column prop="retail_price" :label="this.$t('零售价')" sortable="custom" width="140">-->
<!--                            <template #default="scope">-->
<!--                                <div style="color: #ff5c00;font-size: 14px">-->
<!--                                    <div v-if="scope.row.retail_price_symbol == null || scope.retail_price_symbol == ''">-->
<!--                                        <span>-</span>-->
<!--                                    </div>-->
<!--                                    <div v-else>-->
<!--                                        <span>{{ scope.row.retail_price_symbol }}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                  </el-table-column>-->
                  <el-table-column :label="this.$t('表格.销量')">
                            <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                                <template #default="scope">
                                    <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                                        -
                                    </div>
                                    <div v-else style="font-size: 14px">
                                      {{scope.row.sale_count}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.week_sale_count}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.month_sale_count}}
                                  </div>
                              </template>
                            </el-table-column>
                  </el-table-column>
                  <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="140">
                    <template #default="scope">
                      <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                        <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                        <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                          <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                          <span style="margin-left: 0.3rem;">{{ scope.row.growth_rate }}%</span>
                        </div>
                        <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                        <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                          <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                          <span style="margin-left: 0.3rem;">{{ scope.row.growth_rate }}%</span>
                        </div>
                        <!-- 无数据 -->
                        <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column :label="this.$t('表格.销售额')">
                            <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.revenue == null || scope.row.revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.week_revenue == null || scope.row.week_revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.week_revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px" v-if="scope.row.month_revenue == null || scope.row.month_revenue == ''">-</div>
                                  <div v-else style="font-size: 14px">
                                    {{scope.row.month_revenue}}
                                  </div>
                              </template>
                            </el-table-column>
                  </el-table-column>
                  <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                            <template #default="scope">
                                <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                                <div v-else style="font-size: 14px">
                                    {{ parseInt(scope.row.inventory)}}
                                </div>
                            </template>
                  </el-table-column>
                  <el-table-column prop="score" :label="this.$t('表格.评价分数')" sortable="custom" width="130">
                            <template #default="scope">
                                <div v-if="scope.row.score == '' || scope.row.score == null"> - </div>
                                <div v-else style="font-size: 14px">
                                    <!-- {{ parseInt(scope.row.score)}} -->
                                    {{scope.row.score}}
                                </div>
                            </template>
                  </el-table-column>
                  <el-table-column :label="this.$t('表格.产品评级')">
                            <el-table-column prop="star_comment" :label="this.$t('表格.值')" sortable="custom" width="120">
                              <template #default="scope">
                                <div style="font-size: 14px">
                                    {{ parseFloat(scope.row.star_comment)}}
                                </div>
                            </template>
                            </el-table-column>
                            <el-table-column :label="this.$t('表格.星星')" width="140">
                                <template #default="scope">
                                      <!-- show-score="{star}" -->
                                      <el-rate :model-value="parseFloat(scope.row.star_comment)" disabled allow-half :value="scope.row.star_comment !== '0.00' ? parseFloat(scope.row.star_comment) : 5"/>
                                  <!-- 无数据显示5分 -->
                                </template>
                            </el-table-column>
                  </el-table-column>
                </el-table>
            </div>
              <!-- 卡片视图 -->
              <div v-else v-show="isVip">
                    <div style="display: flex;flex-wrap: wrap; justify-content: flex-start;">
                      <!-- 无数据时 显示no data -->
                      <div v-if="productList2.length == 0" class="card-noData">
                        {{ $t('卡片没有数据') }}
                      </div>
                      <!--有数据时 一个卡片 -->
                      <div v-else class="product-card" v-for="(item,index) in productList2" :key="index" >
                        <div class="top-box">
                          Top{{ index+1 }}
                        </div>
                        <div style="width: 12.5rem;height: 12.5rem;">
                          <img style="width: 12.5rem;height: 100%;object-fit: cover;border-radius: 0.31rem;cursor: pointer;" 
                          :src="item.goods_img" @click="showDetail(item.goods_id)"/>
                        </div>
                        <div class="product-card-title showOverTooltip" style="cursor: pointer;"
                        @click="showDetail(item.goods_id)">{{ item.goods_name }}</div>
                        <div style="display: flex;justify-content: space-between;">
                          <div class="product-card-price">{{ item.retail_price_symbol }}</div>
                          <div v-if="havebtn">
                            <img style="width: 1.56rem;height: 1.56rem;cursor: pointer;" 
                            src="../assets/img/icon/arrowright.svg" @click="showDetail(item.goods_id)"/>
                          </div>
                          <!-- <div v-else>
                            <el-button class="product-card-btn" size="small">{{$t('添加到shopify')}}</el-button>
                          </div> -->
                        </div>
                      </div>
                    </div>
              </div>
            </div>
          </div>
          <!-- 热销排行-->
          <!-- <div v-else>
            <div v-if="!isListData" v-loading="loading" element-loading-text="Loading..." style="margin: 6rem 0;"></div>
            <div v-else>
              <div v-if="isList" v-show="isVip" style="margin-top: 1rem;">
                <el-table :data="productList" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px'}" :row-style="{height:'70px'}">
                  <el-table-column type="index" width="50" label="Rank"/>
                  <el-table-column prop="img" label="Product" width="80">
                    <template #default="scope">
                      <div style="cursor: pointer;">
                        <img :src="scope.row.goods_img" style="width: 2.38rem;height: 3.13rem;" @click="showDetail(scope.row.goods_id)"/>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="Title" width="220">
                    <template #default="scope">
                      <div @click="showDetail(scope.row.goods_id)" style="cursor: pointer;">
                        <p class="showOverTooltip">{{ scope.row.goods_name }}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sale_price_symbol" :label="labelList[0]" width="110"/>
                  <el-table-column prop="shipping_fee" :label="labelList[1]" />
                  <el-table-column prop="retail_price_symbol" :label="labelList[2]" />
                  <el-table-column prop="profit" :label="labelList[3]" />
                  <el-table-column prop="yesterday_sale_count" :label="labelList[4]" width="120"/>
                  <el-table-column prop="sale_count_increase" :label="labelList[5]" >
                    <template #default="scope">
                      <div style="display: flex; align-items: center">
                        <div v-if="scope.row.sale_count_increase_direction == 1">
                          <span >{{ scope.row.sale_count_increase }}</span>
                          <img style="margin:0.5rem 0 0 0.3rem;width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowup1.svg"/>
                        </div>
                        <div v-else-if="scope.row.sale_count_increase_direction==-1">
                          <span >{{ scope.row.sale_count_increase }}</span>
                          <img style="margin: 0 0 -0.2rem 0.3rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                        </div>
                        <div v-else>/</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="yesterday_rank" :label="labelList[6]" width="120"></el-table-column>
                  <el-table-column prop="rank_increase" :label="labelList[5]" >
                    <template #default="scope">
                      <div style="display: flex; align-items: center">
                        <div v-if="scope.row.rank_increase_direction==1">
                          <span>+{{ scope.row.rank_increase }}</span>
                          <img style="margin:0.4rem 0 0 0.3rem" src="../assets/img/icon/arrowup1.svg"/>
                        </div>
                        <div v-else-if="scope.row.rank_increase_direction==-1">
                          <span>{{ scope.row.rank_increase }}</span>
                          <img style="margin: 0.4rem 0 0 0.3rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                        </div>
                        <div v-else>/</div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-else v-show="isVip">
                    <div style="display: flex;flex-wrap: wrap; justify-content: flex-start;">
                      <div v-if="productList.length == 0" class="card-noData">
                        {{ $t('卡片没有数据') }}
                      </div>
                      <div v-else class="product-card" v-for="(item,index) in productList" :key="index" >
                        <div class="top-box">
                          Top{{ index+1 }}
                        </div>
                        <div style="width: 12.5rem;height: 12.5rem;">
                          <img style="width: 12.5rem;height: 100%;object-fit: cover;border-radius: 0.31rem;cursor: pointer;" 
                          :src="item.goods_img" @click="showDetail(item.goods_id)"/>
                        </div>
                        <div class="product-card-title showOverTooltip" style="cursor: pointer;"
                        @click="showDetail(item.goods_id)">{{ item.goods_name }}</div>
                        <div style="display: flex;justify-content: space-between;">
                          <div class="product-card-price">{{ item.retail_price_symbol }}</div>
                          <div v-if="havebtn">
                            <img style="width: 1.56rem;height: 1.56rem;cursor: pointer;" 
                            src="../assets/img/icon/arrowright.svg" @click="showDetail(item.goods_id)"/>
                          </div>
                        </div>
                      </div>
                    </div>
              </div>
            </div>
          </div> -->
         <!-- 不是vip时显示 -->
        <div v-show="!isVip && isListData && isListData2">
          <div class="can-not-show" style="width: 72.5rem;">{{ $t('没开vip') }}</div>
          <div style="margin-top: 1rem;margin-left: 33rem;">
              <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ElMessage } from 'element-plus';
  import {getCountries,getCategory,getProducts,getProductsRank} from '../apis/rank'
  export default {
    name: 'MyComponent',
    data(){
      return {
        loading :true,
        // 是否加载完列表的数据  是否显示loading  按销量
        isListData:true,
        // 是否加载完列表的数据 是否显示loading  按增长率
        isListData2:true,
        // 是否显示热销排行
        isHotSellingRank:false,
        isVip:false,
        // 分类列表
        cateList:[
            {
              value:0,
              name:''
            },
          ],
        // 更多列表
        moreList:[
          {
            value:0,
            name:''
          },
        ],
        // 表格表头
        labelList:[
          this.$t('进货价'),this.$t('运费'),this.$t('零售价'),this.$t('利润'),this.$t('昨日销量'),
          this.$t('涨幅'),this.$t('昨日排名'),this.$t('今日销量'),this.$t('销售额增加'),this.$t('增长率')
        ],
        // 控制选中国家的按钮样式
        countriesList:[],
        // 产品列表 销量
        productList:[],
        // 产品列表 增长率
        productList2:[],
        sort:'growth_rate',
        order:'descending',
        getProductInfo:{
          "log_date": "",
          "first_cate_id": "",
          "second_cate_id": "",
          "country": "",
        },
        // 是否显示按钮
        havebtn:true,
        // 控制列表和卡片的切换
        isList:false,
        // 筛选条件
        filterAll1:{
          country:'FR',
          // 分类
          first_cate_id:4,
          second_cate_id:196,
          // 日期
          log_date:'',
          country_index:0
        },
        // 获取分类列表的参数
        filterGetCate1:{
          country:'FR',
          parent_id:4
        },
        options:[this.$t('热销TOP100'),this.$t('增长率TOP100'),],
        value:this.$t('热销TOP100'),
        minTime:null
      }
    },
    created(){
      this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    },
    mounted(){
      // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
      this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
      this.filterGetCate1.parent_id =4
      let a  = JSON.parse(localStorage.getItem('filterAll1'));
      if (a!=null){
        this.filterAll1 = a;
        if(a.log_date == null || a.log_date==''){
          const today = new Date()
          const yesterday = new Date(today)
          yesterday.setDate(yesterday.getDate() - 1);
          this.filterAll1.log_date = yesterday.toISOString().split('T')[0]; // 设置默认日期为昨天
          console.log("日期",this.filterAll1.log_date)
        }else if(a.first_cate_id !==null || a.first_cate_id !== '' || a.first_cate_id!== 0){
          this.filterGetCate1.parent_id = a.first_cate_id
          this.getCountryList()
          if(this.cateList.length>0){
            // 用于筛选默认商品列表
            // this.filterAll1.first_cate_id = this.cateList[0].id
          }
        }else if(a.second_cate_id !==null || a.second_cate_id !== ''){
          // 二级分类绑定的id 选中的二级分类id 用于筛选商品列表
          this.filterAll1.second_cate_id = a.second_cate_id
        }else if(a.first_cate_id == 0 || a.first_cate_id ==null || a.first_cate_id == ''){
          this.filterGetCate1.parent_id = 1
        }
      }else{
        const today = new Date()
        const yesterday = new Date(today)
        yesterday.setDate(yesterday.getDate() - 1);
        this.filterAll1.log_date = yesterday.toISOString().split('T')[0]; // 设置默认日期为昨天
        console.log("日期",this.filterAll1.log_date)
      }
      let b  = JSON.parse(localStorage.getItem('filterGetCate1'));
      if(b != null){
        this.filterGetCate1 = b;
        // if(b.parent_id !== null || b.parent_id !== '' || b.parent_id !==0){
        //   if(this.cateList.length>0){
        //     if(a.first_cate_id !==null || a.first_cate_id!== ''|| a.first_cate_id!== 0){
        //       // 一级分类绑定的id 选中的一级分类id 用于筛选二级分类
        //       this.filterGetCate1.parent_id = a.first_cate_id
        //     }else{
        //       this.filterGetCate1.parent_id =1
        //     }
        //   }
        // }
      }
      this.getCountryList()
      // 加载商品前 判断都不为空才能请求数据 为空时提示
      if(this.filterAll1.first_cate_id == null || this.filterAll1.first_cate_id == '' || this.filterAll1.second_cate_id == null ||this.filterAll1.second_cate_id == ''){
          ElMessage({
            message: this.$t('请选择分类'),
            grouping: true,
            type: 'warning',
            duration:3000,
            showClose: true,
            offset:500
          })
        }else if(this.filterAll1.log_date == null || this.filterAll1.log_date == ''){
          ElMessage({
            message: this.$t('请选择日期'),
            grouping: true,
            type: 'warning',
            duration:3000,
            showClose: true,
            offset:500
          })
        }
        else{
          this.isListData2 = false
          this.getTopProducts2()
          // this.isListData = false
          // this.getTopProducts()
        }
      let c = JSON.parse(localStorage.getItem('myinfo'))
      if(c.is_active!==false){
        this.isVip = true
      }
    },
    computed: {
    sortedProductList() {
      const sortedList = [...this.productList2];
      if (this.sort && this.order) {
        sortedList.sort((a, b) => {
          if (this.order === 'ascending') {
            return a[this.sort] - b[this.sort];
          } else {
            return b[this.sort] - a[this.sort];
          }
        });
      }
      return sortedList;
    }
  },
    watch: {
      // 监听国家、一级分类、二级分类的变化，并在变化后获取商品数据
      'filterAll1.country': {
        handler(newVal) {
          if (newVal) {
            // this.getCateList();
          }
        },
        immediate: true
      },
      // 监听一级分类的变化，并在变化后获取二级分类列表
      'filterAll1.first_cate_id': {
        handler(newVal) {
          if (newVal) {
            // this.getCateList2();
          }
        },
        immediate: true
      },
      // 监听二级分类的变化，并在变化后获取商品数据
      'filterAll1.second_cate_id': {
        handler(newVal) {
          if (newVal) {
            // this.getTopProducts();
          }
        },
        immediate: true
      }
    },
    methods:{
      // 获取国家列表
      getCountryList(){
        getCountries().then((res)=>{
          // 读缓存 没有的时候默认第一个
          if(res.code == 200 && res.status ==1)
          {
            let item_data=[]
                for(let i in res.data){
                if(i==0 && localStorage.getItem('filterAll1') == null){
                  res.data[i].select_country = 'country-btn-click'
                  item_data.push(res.data[i])
                  this.filterGetCate1.country = res.data[i].short_name
                  this.filterAll1.country = res.data[i].short_name
                  this.filterAll1.country_index = 0
                }else{
                  res.data[i].select_country = 'country-btn'
                  item_data.push(res.data[i])
                }
              }
            this.countriesList = item_data
            this.getCateList()
          }
        })
      },
      // 获取一级分类
      getCateList(){
        if(this.filterGetCate1.country =="")
          return ;
        else{
          getCategory({country:this.filterGetCate1.country,parent_id:0}).then((res)=>{
            if(res.code == 200 && res.status ==1){
              if(res.data.lists){
                if(res.data.lists){
                  this.cateList = res.data.lists
              // if(this.cateList.length>0){
                // 用于筛选默认商品列表
                // this.filterAll1.first_cate_id = this.cateList[0].id
               // 一级分类绑定的id 选中的一级分类id 用于筛选二级分类
                // this.filterGetCate1.parent_id = this.cateList[0].id
              // }
              this.filterAll1.first_cate_id = this.cateList[0].id
              this.filterGetCate1.parent_id = this.cateList[0].id
              this.isListData2 = false
              this.getCateList2()
                }
              }
            }
          })
        }
      },
      // 获取二级分类
      getCateList2(){
        // if (this.filterGetCate1.parent_id == 0) return;
        getCategory(this.filterGetCate1).then((res)=>{
          if(res.code == 200 && res.status ==1){
            if(res.data.lists){
            this.moreList = res.data.lists
            console.log("111111111111111",res.data)
            this.filterAll1.second_cate_id = this.moreList[0].id
            this.isListData = false
            this.getTopProducts2()
          }
          }
        })
      },
      selectCate1(){
        this.filterGetCate1.parent_id = this.filterAll1.first_cate_id
        this.getCateList2()
        // 清空二级分类id
        this.filterAll1.second_cate_id = ''
        // localStorage.setItem('filterAll1',JSON.stringify(this.filterAll1));
      },
      // 按销量排序
      getTopProducts(){
        // if (!this.filterAll1.country|| !this.filterAll1.first_cate_id|| !this.filterAll1.second_cate_id || !this.filterAll1.log_date) return;
        getProducts(this.filterAll1).then((res)=>{
          this.isListData = false
          if(res.code == 200 && res.status == 1){
            for(let i in res.data.lists)
            {
              this.productList.push(res.data.lists[i])
            }
            this.getProductInfo.country = res.data.country
            this.getProductInfo.log_date = res.data.log_date
            this.getProductInfo.first_cate_id =res.data.first_cate_id
            this.getProductInfo.second_cate_id =res.data.second_cate_id
            this.isListData = true
          }
        }).catch((error)=>{
          this.isListData = true
          console.log('请求失败:', error);
        })
      },
      // 按增长率排序
      getTopProducts2(){
        this.isListData = false
        getProductsRank(this.filterAll1).then((res)=>{
          if(res.code == 200 && res.status == 1){
            this.productList2 = []
            for(let i in res.data.lists)
            {
              this.productList2.push(res.data.lists[i])
            }
            this.isListData2 = true
          }
        }).catch((error)=>{
          this.isListData = true
          console.log('请求失败:', error);
        })
      },
      // 切换显示类型 卡片/列表
      changeType(index){
        if(this.isList == true && index ==1)
        {
          this.isList = false
        }
        else if(this.isList == true && index ==2){
          this.isList = true
        }
        else if(this.isList == false && index ==3){
          this.isList = false
        }
        else if (this.isList == false && index ==4){
          this.isList = true
        }
      },
      showDetail(id){
          // this.$router.push({
          //     path:'/panel/detail2',
          //     query:{
          //         id:id
          //     }
          // })
          // 跳转新标签页
          const routeData = this.$router.resolve({
                  name: 'detail2',
                  query:{
                      id:id,
                      country:this.filterAll1.country,
                      returnUrl: window.location.href // 记录当前页面的 URL
                  }
              });
              window.open(routeData.href, '_blank');
      },
      // 选中国家
      selectCountry(i){
        //if(this.cateList !==[] && this.moreList !==[]){
          for(var n in this.countriesList){
            this.countriesList[n].select_country ="country-btn"
          }
          // 清空filterAll1
          // this.filterAll = {}
          localStorage.setItem('filterAll1','')
          localStorage.setItem('filterGetCate1','')
          this.filterAll1.country_index = i
          this.countriesList[i].select_country ="country-btn-click"
          this.filterGetCate1.country = this.countriesList[i].short_name
          this.filterGetCate1.parent_id = i+1
          this.filterAll1.country = this.countriesList[i].short_name
          this.cateList = []
          this.moreList =[]
          this.getCateList()
          // 保存选项
          localStorage.setItem('filterGetCate1',JSON.stringify(this.filterGetCate1));
          localStorage.setItem('filterAll1',JSON.stringify(this.filterAll1));
          this.getTopProducts2()
        //}
      },
      // 跳转到订阅页面
      shiftReserve(){
        this.$router.push('/subscribe/price')
      },
      // 设置不可选的时间
      disabledDate(time){
        if (!(time instanceof Date)) {
          time = new Date(time);
        }
        // 7天的时间戳
        // const one = 8 * 24 * 3600 * 1000;
        // // 当前日期 - one = 7天之前
        // const minTime = Date.now() - one;
        return (
          time.getTime() > Date.now()-24*3600*1000 ||
          time.getTime() < this.minTime
        )
      },
      updateDisabledDateRange() {
        // 这里可以添加任何需要更新的逻辑
        const one = 8 * 24 * 3600 * 1000;
        // 当前日期 - one = 7天之前
        this.minTime = Date.now() - one;
        this.$forceUpdate(); // 强制更新组件，确保 disabledDate 重新计算
      },
      handleFocus(){
        this.disabledDate()
      },
      handleVisibleChange(visible){
      if (visible) {
        this.updateDisabledDateRange();
      } else {
        console.log('unvisible');
      }
    },
      searchProduct(){
        localStorage.setItem('filterGetCate1',JSON.stringify(this.filterGetCate1));
        localStorage.setItem('filterAll1',JSON.stringify(this.filterAll1));
        this.productList = []
        this.productList2 = []
        if(this.filterAll1.first_cate_id == null || this.filterAll1.first_cate_id == '' || 
          this.filterAll1.second_cate_id == null ||this.filterAll1.second_cate_id == ''){
          ElMessage({
            message: this.$t('请选择分类'),
            grouping: true,
            type: 'warning',
            duration:3000,
            showClose: true,
            offset:500
          })
        }else if(this.filterAll1.log_date == null || this.filterAll1.log_date == ''){
          ElMessage({
            message: this.$t('请选择日期'),
            grouping: true,
            type: 'warning',
            duration:3000,
            showClose: true,
            offset:500
          })
        }
        else{
            this.isListData = false
            this.isListData2 = false
            this.getTopProducts()
            this.getTopProducts2()
        }
      },
      segmentChange(e){
        if(e == this.$t('热销TOP100')){
          this.isHotSellingRank = false
        }else if(e == this.$t('增长率TOP100')){
          this.value = e
          this.isHotSellingRank = true
        }
      },

      handleSortChange({ column, prop, order }){
      console.log(111111111,column)
      console.log(222222222,prop)
      console.log(333333333,order)
      if (!prop) {
        // 如果 prop 为空，可以选择忽略排序或给出提示
        console.warn('prop,error');
        return;
      }
      this.sort = prop;
      this.order = order
    },
    getHeaderCellClassName({ column, columnIndex }) {
      console.log(columnIndex)
      if (this.sort == column.property) {
        return 'sorted-header';
      }
      return '';
    },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .filter-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    height: 24.38rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .filter-card-title{
      width: 19.38rem;
      height: 1.88rem;
      line-height: 1.88rem;
      color: rgba(16, 16, 16, 1);
      font-size: 1.25rem;
      font-weight: 600;
      text-align: left;
      font-family: AlibabaPuHui-medium;
    }
  }
  .sub-title{
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .selecter-label{
    width: 5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: AlibabaPuHui-regular;
  }
  .show-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 21.88rem;
    // max-height: 48.13rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .product-card{
      position: relative;
      margin: 1rem 1rem 0 0;
      width: 12.5rem;
      height: 17.5rem;
      border-radius: 0.31rem;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(229, 229, 229, 1);
      cursor: pointer;
    }
    .product-card-title{
      margin: 0.31rem 1rem 0 0.7rem;
      width: 11.25rem;
      height: 2.5rem;
      line-height: 1.25rem;
      color: rgba(16, 16, 16, 1);
      font-size: 0.75rem;
      text-align: left;
      font-family: AlibabaPuHui-regular;
    }
    .product-card-price{
      margin: 0 0 0 0.6rem;
      width: 6rem;
      height: 1.56rem;
      line-height: 1.56rem;
      color: rgba(250, 99, 56, 1);
      font-size: 0.88rem;
      text-align: left;
      font-family: AlibabaPuHui-bold;
    }
    .product-card-btn{
      margin-right: 1rem;
      width: 4.94rem;
      height: 1.56rem;
      border-radius: 5.63rem;
      border: 0.06rem solid rgba(22, 93, 255, 1);
      color: rgba(22, 93, 255, 1);
      font-size: 0.58rem;
      text-align: center;
      font-family: Roboto;
    }
    .top-box{
      position: absolute;
      z-index: 2;
      width: 3.75rem;
      height: 1.25rem;
      line-height: 1.06rem;
      border-radius: 0.31rem 0rem 0.31rem 0rem;
      background-color: rgba(253, 0, 0, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 0.75rem;
      font-weight: 600;
      text-align: center;
      font-family: Roboto;
    }
  }
  /* el-divider 修改高度效果 */
  .el-divider--horizontal{
       margin: 1rem 0;
      //  background: 0 0;
       border-top: 0.1rem solid #f2f3f5;
   }
  //  显示两行
   .showOverTooltip{
    padding: 0 0.3rem;
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 46px;
    margin: auto 0;
    color: #165DFF;
  }
  // 国家按钮 选中
  .country-btn-click{
    min-width: 6.25rem;
    height: 2.5rem;
    line-height: 1.25rem;
    border-radius: 0.13rem;
    background-color: rgba(22, 93, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
  }
  // 国家按钮 未选中
  .country-btn{
    min-width: 6.25rem;
    height: 2.5rem;
    line-height: 1.25rem;
    border-radius: 0.13rem;
    background-color: rgba(242, 243, 245, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
  }
  .can-not-show{  
      margin-top: 3rem;
      width: 36.25rem;
      height: 3.13rem;
      line-height: 3.13rem;
      color: rgba(16, 16, 16, 1);
      font-size: 0.88rem;
      text-align: center;
      font-family: AlibabaPuHui-regular;
  }
  .card-noData{
    margin: 3rem 0;
    width: 72.5rem;
    height: 3.13rem;
    color: rgba(187, 187, 187, 1);
    font-size: 1.25rem;
    text-align: center;
    font-family: AlibabaPuHui-bold; 
  }
  .custom-style .el-segmented {
          //   --el-segmented-item-selected-color: var(--el-text-color-primary);
          --el-segmented-item-selected-color:#1F63FF ;
          //   --el-segmented-item-bg-color: #fff;
          --el-segmented-item-selected-bg-color: #F2F3F8;
          --el-border-radius-base: 20px;
  }
  ::v-deep .el-table th.sorted-header  {
    color: #3a8ddb !important;
}
  </style>